<template>
    <sharp v-for="(item, index) in components" :key="index"  :style="formateUnitOfStyle(item.style)" 
    :originalStyle="item.style">
      <component :is="item.is" :id="item.id" :element="item"/>
    </sharp>
  </template>
  
  <script setup>
  /**
   * 云凤蝶
   * 
   * 分层思想 -- CSS 图层模型
   * 
   * 0 div -- 渲染         |
   * 1 div -- 高亮         |
   * 2 div -- 右键事件      | event bus
   * 3 div -- 快捷键        |
   * 4 div -- 交互（吸附对齐）|
   */
  
  import { inject } from 'vue'
  
  import Sharp from './editors/Sharp.vue'
  const components = inject('renderComponents')
  
  const formateUnitOfStyle = (style = {}) => {
    let styl = {}
    const needUnitOfStyle = ['width', 'height', 'top', 'left']
    for (const [k, v] of Object.entries(style)) {
      if (typeof v === 'number' && needUnitOfStyle.includes(k)) {
        styl[k] = v + 'px'
      }
      else styl[k] = v
    }
  
    return styl
  }
  </script>




<!-- <template>
   <sharp v-for="(item,index) in components" :key="index" :style="formateUnitStyle(item.style)"  
   :originalStyle = 'item.style'>
       <component :is="item.is" :id="item.id" :element="item" /> 
   </sharp>
</template>

<script setup>

import {inject} from'vue';

import sharp from '../components/editors/sharp.vue'
const components = inject('renderComponents')


const formateUnitStyle = (style = {})=>{
    let styl = {}
    const needleStyle = ['width','height','top','left']

    for(const [k,v] of Object.entries(style)){
        if(typeof v == 'number' && needleStyle.includes(v)){
                 styl[k] = v+'px';
        }else{
            styl[k] = v
        }
    }

    return styl
}


</script> -->